<script lang="ts" setup>
import { onMounted, ref, Ref } from "vue";
import StorageApi, { Item } from "@/api/blogs/storage";
onMounted(() => {
  getPhotos();
});

const photos: Ref<Array<Item>> = ref([]);
const getPhotos = async () => {
  photos.value = await StorageApi.getList();
};
const ossUrl = "https://oss.viazycore.com/";
</script>
<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col v-for="item in photos" :key="item.key" :span="6">
        <el-card
          :body-style="{ padding: '0px' }"
          :style="{ marginTop: '20px' }"
        >
          <img
            v-if="!item.isDir"
            :src="ossUrl + item.bucketName + '/' + item.key"
            class="image"
          />
          <div style="padding: 14px">
            <span>{{ item.key }} size:{{ item.size }}</span>
            <div class="bottom">
              <time class="time">{{
                new Date(item.lastModifiedDateTime).toDateString()
              }}</time>
              <el-button text class="button">Operating</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
